<template>
    <div class="app-container home-content">
        <levelbar></levelbar>
        <div class="rg-mb mg-top content" style="margin-top:0;">
          <el-form ref="form" :model="form" label-width="0">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="">
                  <start-date v-model="form.startDate" :picker-options="form.pickerOptions1" :end-date-options.sync="form.pickerOptions2" :state="false"></start-date>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="">
                  <end-date v-model="form.endDate" :picker-options="form.pickerOptions2" :start-date-options.sync="form.pickerOptions1" :state="false"></end-date>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-col>
              <span class="box-right clearfix">
                <el-button @click="onYesterday">昨天</el-button>
                <el-button @click="onAweek">近7天</el-button>
              </span>
            </el-row>
          </el-form>
        </div>
        <!-- <div class="rg-mb b-pd content" style="display:none">
          <p class="top-title">教师活跃度</p>
          <el-row :gutter="20">
            <el-col :offset="6" :span="6">
              <p class="title-ms">使用人数</p>
              <b class="title-ms title-b">{{teacherUseNum}}</b>
            </el-col>
            <el-col :span="6">
              <p class="title-ms">使用次数</p>
              <b class="title-ms title-b">{{teacherUseTime}}</b>
            </el-col>
          </el-row>
        </div> -->
        <div class="rg-mb b-pd content">
          <p class="top-title">作业布置量</p>
          <div class="box box-left">
            <el-select v-model="content.gradeValue" placeholder="请选择" @change="eventgrade">
              <el-option v-for="item in content.gradeList" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId">
              </el-option>
            </el-select>
          </div>
          <div>
              <el-row :gutter="20">
                <el-col :span="20">
                    <homeWorkEchart v-loading = "homeWorkloading" id="topLine" width="100%" height="424px" :homeWorkObj="homeWorkObj"></homeWorkEchart>
                </el-col>
                <el-col :span="4">
                    <p class="top-p">布置作业次数 TOP 5</p>
                    <ul class="top-cli" v-if="homeWorkList.length > 0">
                        <li v-for="(item,index) in homeWorkList" :key="item.teacherId"><i>{{index + 1}}</i>{{item.teacherName}}</li>
                    </ul>
                    <ul class="top-cli" v-else>
                        <li class="top-li-oline">暂无数据</li>
                    </ul>
                </el-col>
            </el-row>
          </div>
        </div>
        <div class="rg-mb b-pd content">
          <p class="top-title">资源上传&课件制作数</p>
          <div class="box box-left">
            <el-select v-model="content.resourcesValue" placeholder="请选择" @change="resourcesChange">
              <el-option v-for="item in content.resourcesList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
            <el-row :gutter="20" v-if="content.resourcesValue == 0">
                <el-col :span="20" >
                        <resourcesEchart v-loading="loading" id="resourcesOne" width="100%" height="424px" :obj="listCount"></resourcesEchart>
                </el-col>
                <el-col :span="4">
                    <p class="top-p">教师上传资源 TOP 5</p>
                    <ul class="top-cli" v-if="resourcesTop.length > 0">
                        <li v-for="(item , index) in resourcesTop" :key="item.teacherId"><i>{{index + 1}}</i>{{item.teacherName}}</li>
                    </ul>
                    <ul class="top-cli" v-else>
                        <li class="top-li-oline">暂无数据</li>
                    </ul>
                </el-col>
            </el-row>
                
            <el-row :gutter="20" v-if="content.resourcesValue == 1">
                <el-col :span="20">
                    <resourcesEchart  v-loading="loading" id="resourcesTwo" width="100%" height="424px" :obj="coursewareNum"></resourcesEchart>
                </el-col>
                <el-col :span="4">
                    <p class="top-p">教师课件制作 TOP 5</p>
                    <ul class="top-cli" v-if="resourcesTop.length > 0">
                        <li v-for="(item , index) in resourcesTop" :key="item.teacherId"><i>{{index + 1}}</i>{{item.teacherName}}</li>
                    </ul>
                    <ul class="top-cli" v-else>
                        <li class="top-li-oline">暂无数据</li>
                    </ul>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import homeWorkEchart from './comps/homeWorkEchart';
import resourcesEchart from './comps/resourcesEchart';
import {
//   getTeacherBrowseNum,
  countMaterialResourceAmount,
  getTeacherResourceNumTop,
  getGradeBySchoolId,
  countHomeworkArrangeAmount,
  getTeacherPublishNumTop
} from 'api/home';
import { mapGetters } from 'vuex';
export default {
    name: 'index',
    components: { Levelbar, startDate, endDate, homeWorkEchart, resourcesEchart },
    data() {
        return {
            form: {
                date: '',
                startDate: '',
                endDate: '',
                pickerOptions1: {
          // disabledDate(time) {
          //   return time.getTime() > Date.now();
          // }
                },
                pickerOptions2: {
                }
            },
            homeWorkloading: false,
            content: {
                gradeValue: '',
                gradeList: [],
                resourcesValue: '0',
                resourcesList: [
                    {
                        value: '0',
                        label: '资源上传'
                    },
                    {
                        value: '1',
                        label: '课件制作数'
                    }
                ]
            },
      // pickerOptions2: {
      //   shortcuts: [
      //     {
      //       text: "昨天",
      //       onClick(picker) {
      //         const end = new Date();
      //         const start = new Date();
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      //         picker.$emit("pick", [start, end]);
      //       }
      //     },
      //     {
      //       text: "近7天",
      //       onClick(picker) {
      //         const end = new Date();
      //         const start = new Date();
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      //         picker.$emit("pick", [start, end]);
      //       }
      //     }
      //   ]
      // },
            // teacherUseTime: '',
            // teacherUseNum: '',
            loading: false,
            listCount: {
                xData: [],
                yData: [],
                legendD: '资源上传'
            }, // listCount 资源上传
            coursewareNum: {
                xData: [],
                yData: [],
                legendD: '课件制作数'
            }, // 课件制作数
            resourcesTop: [], // 教师top
            homeWorkObj: {
                gradeName: [],
                finishRate: [],
                publishNum: []
            }, // 作业布置量
            homeWorkList: [] // 作业布置了 TOP
        };
    },
    computed: {
        ...mapGetters(['schoolId', 'schoolType'])
    },
    created() {
        this.onYesterday(); // 默认展示昨天
    // this.initDate();
    },
    methods: {
    // 返回年月日时分秒
        fifterDate(date) {
            if (typeof date === 'string') {
                return date;
            } else {
                let month = this.addZero(date.getMonth() + 1 + '');
                let day = this.addZero(date.getDate() + '');
        // let hour = this.addZero(date.getHours() + '');
        // let minutes = this.addZero(date.getMinutes() + '');
        // let seconds = this.addZero(date.getSeconds() + '');
        // return `${date.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
                return `${date.getFullYear()}-${month}-${day}`;
            }
        },
    // 补0
        addZero(str) {
            if (typeof str === 'string') {
                return str.length > 1 ? str : '0' + str;
            }
        },
        onSubmit() {
            if (this.form.startDate && this.form.endDate) {
                this.form.date = `${this.fifterDate(
          this.form.startDate
        )} 00:00:00;${this.fifterDate(this.form.endDate)} 23:59:59`;
            }
            this.initDate();
        },
        onYesterday() {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 1);
            this.form.date = `${this.fifterDate(date)} 00:00:00;${this.fifterDate(
        date
      )} 23:59:59`;
            this.form.startDate = date;
            this.form.endDate = date;
            this.initDate();
        },
        onAweek() { // 显示近七天时间回填
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            this.form.date = `${this.fifterDate(start)} 00:00:00;${this.fifterDate(
        end
      )} 23:59:59`;
            this.form.startDate = start;
            this.form.endDate = end;
            this.initDate();
        },
        initDate() {
            this.getTeacher(this.form.date);
            this.resourcesChange();
            this.getTeacherPublish();
            this.eventgrade(this.content.gradeValue);
            this.getGrade();
        },

    // 教师浏览器人数
        getTeacher(date) {
            // getTeacherBrowseNum(this.schoolId, date).then(data => {
            //     this.teacherUseNum = data.data.content.teacherUseNum;
            //     this.teacherUseTime = data.data.content.teacherUseTime;
            // });
        },

    // 获取年级
        getGrade() {
            getGradeBySchoolId(this.schoolId).then(data => {
                this.content.gradeList = data.data.content;
                this.content.gradeList.unshift({ gradeName: '全校', gradeId: '' });
                this.content.gradeValue = this.content.gradeList[0].gradeId;
            });
        },

    // 切换学校
        eventgrade(val) {
            this.getcountHomework(this.content.gradeValue);
        },

    // 作业布置量
        getcountHomework(val) {
            this.homeWorkloading = true;
            countHomeworkArrangeAmount(this.schoolId, this.form.date, val)
        .then(data => {
            this.homeWorkloading = false;
            let content = data.data.content;
          // homeWorkObj
            this.homeWorkObj.gradeName = [];
            this.homeWorkObj.finishRate = [];
            this.homeWorkObj.publishNum = [];
            if (val) {
            // 全校包含年级
                content.forEach(item => {
                    this.homeWorkObj.gradeName.push(item.className); // 班级
                    this.homeWorkObj.finishRate.push(item.finishRate); // 完成率
                    this.homeWorkObj.publishNum.push(item.publishNum); // 教师发布作业题量
                });
            } else {
            // 全校  schoolType  0 普通学校 1 培训学校
                if (this.schoolType == 0) {
                    content.forEach(item => {
                        this.homeWorkObj.gradeName.push(item.gradeName); // 年级
                        this.homeWorkObj.finishRate.push(item.finishRate); // 完成率
                        this.homeWorkObj.publishNum.push(item.publishNum); // 教师发布作业题量
                    });
                } else {
                    content.forEach(item => {
                        this.homeWorkObj.gradeName.push(item.className); // 年级
                        this.homeWorkObj.finishRate.push(item.finishRate); // 完成率
                        this.homeWorkObj.publishNum.push(item.publishNum); // 教师发布作业题量
                    });
                }
            }
        })
        .catch(Error => {
            this.homeWorkloading = false;
        });
        },

    // 作业布置了TOP
        getTeacherPublish() {
            getTeacherPublishNumTop(this.schoolId, this.form.date).then(data => {
                this.homeWorkList = data.data.content;
            });
        },

    // 统计上传素材和资源
        countMater(date) {
            this.loading = true;
            countMaterialResourceAmount(
        this.schoolId,
        date,
        this.content.resourcesValue
      )
        .then(data => {
            this.loading = false;
          // listCount  0 资源上传  1  coursewareNum 课件制作数
            let arrList = data.data.content;
          // 初始化
            this.listCount.xData = [];
            this.listCount.yData = [];
            this.coursewareNum.xData = [];
            this.coursewareNum.yData = [];

            arrList.forEach(item => {
                if (this.content.resourcesValue == 0) {
                    this.listCount.xData.push(item.subjectName);
                    this.listCount.yData.push(item.uploadNum);
                } else {
                    this.coursewareNum.xData.push(item.subjectName);
                    this.coursewareNum.yData.push(item.coursewareNum);
                }
            });
        })
        .catch(Error => {
            this.loading = false;
        });
        },

    // 上传素材和资源切换
        resourcesChange(num) {
            this.countMater(this.form.date);
            this.getTextbook();
        },

    // 教师top
        getTextbook() {
            getTeacherResourceNumTop(
        this.schoolId,
        this.form.date,
        this.content.resourcesValue
      ).then(data => {
          this.resourcesTop = data.data.content;
      });
        }
    }
};
</script>

<style lang="scss">
.home-content {
  .top-p {
    font-size: 14px;
    color: #666;
    // text-align: center;
    margin-bottom: 60px;
  }
  .top-cli {
    font-size: 14px;
    font-family: "MicrosoftYaHei";
    li {
      list-style: none;
      font-size: 14px;
      margin-bottom: 50px;
      &:nth-child(-n + 3) {
        color: #ff5e2c;
        i {
          color: #fff;
          background: #ff5e2c;
        }
      }
      i {
        margin-left: 8%;
        display: inline-block;
        margin-right: 30px;
        text-align: center;
        font-style: normal;
        line-height: 18px;
        width: 18px;
        height: 18px;
        background: #ebebeb;
        color: #fff;
      }
    }
    .top-li-oline{
        color: #ccc !important;
        margin-left: 39px;
    }
  }
  .top-cli-title{
        color: #ccc !important;
        margin-left: 39px;
    }
  .app-container {
    position: relative;
    padding: 20px 20px 10px;
  }
  .content {
    position: relative;
    margin: 20px 0 2px;
    padding: 0 20px;
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .b-pd {
    padding: 40px;
  }
  .box {
    margin-bottom: 20px;
  }
  .box-left{
      padding-left: 20px;
  }
  .mg-top {
    padding-top: 20px;
  }
  .box-right {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
  }
  .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  .top-title {
    position: relative;
    font-size: 14px;
    margin-left: 20px;
    color: #333;
    margin-bottom: 40px;
    &::after {
      content: "";
      width: 4px;
      height: 14px;
      background: #ff5e2c;
      position: absolute;
      left: -15px;
      top: 2px;
    }
  }
  .title-ms {
    text-align: center;
    display: block;
    font-size: 22px;
    color: #999;
    line-height: 36px;
  }
  .title-b {
    font-size: 36px;
    line-height: 45px;
    color: #343434;
    font-family: "MicrosoftYaHei";
    margin-bottom: 40px;
  }
  .box {
    .el-input__inner {
      border-radius: 2px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      box-shadow: none;
      -webkit-box-shadow: none;
      width: 150px;
      color: #333
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      color: #333;
    }
  }
}
</style>
